<template>
	<div class="active">
		<div class="dinwei">
            <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="it in goodsList.img">
                    <img :src='`/api${it}`'>
                </van-swipe-item>
            </van-swipe>
            <h4 style="color:pink; margin-left: 20px;">{{goodsList.brandName}}</h4>
            <p style="font-size:18px ;font-weight:bold; margin-top: 5px; margin-bottom: 6px;">{{goodsList.name}}</p>
            <span style="font-size:24px; color: red; margin-left: 20px; margin-top: 5px;">￥{{goodsList.price}}</span>
            <p style="margin-left:20px ; font-weight:bold;margin-top:5px">商品展示</p>
            <img v-for="it in mobileDescImg" :key="it.id" :src="`/api${it}`" style="width:100% ;height:500px; margin-top:5px;">
        </div>
		<van-submit-bar  button-text="加入购物车" @submit="addCart(goodsList)" />
        <div class="return" @click="bindUss"><span class="iconfont icon-gouwuche"></span></div>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { RequestDetailsSurroundingAPI } from '../../api/goods'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import {useRouter} from 'vue-router'
import { useCounterStore } from '../../stores/users'
import { Toast } from 'vant'
import Ajax from '../../api/axios'

const store = useCounterStore()
const onClickLeft = () => history.back()
const goodsList = ref([])
const onSubmit = () => Toast('点击按钮');
const route = useRoute()
const mobileDescImg = ref([])
const router =useRouter()

async function bindss() {
	const res = await RequestDetailsSurroundingAPI(route.query.itemsId)
	if (res.code === 200) {
        const { mobileDesc } = res.data
        mobileDescImg.value = mobileDesc
		goodsList.value = res.data
		console.log(goodsList.value)
	}
}
function bindUss(){
    router.push('/cart')
}
function addCart(goodsList) {
	Ajax({
		url: '/cart/add',
		method: 'POST',
		data: {
            "userId": store.userInfo.id,
            "price":goodsList.price,
            "id": goodsList.itemsId,
            "time": Date.now(),
            "count": 1,
            "name": goodsList.name,
            "detailaddress": "待支付",
            "bgUrl": goodsList.img[0]
        }
	}).then(d => {
		console.log(d.code)
		if (d.code === 200) {
			Toast.success('添加成功')
		} else {
			Toast.fail('添加失败')
		}
	})
}
onMounted(() => {
	bindss()
})
</script>

<style lang="scss" scoped>
.dinwei{
    position: sticky;
       top: 0;
       z-index: 9;
}
.active{
    
}
.return{
    position: fixed;
    bottom: 5px;
    right: 0;
    left: 30px;
    z-index:999;
    width: 40px;
	height: 40px;
    span{
        font-size: 30px;
        color: red;
    }
}
</style>
